<template>
  <div>
    <div class="answer">
      <ul class="answer-mat">
        <li class="answer-mat-chi" @click="toggle1()">1 填写送餐信息</li>
        <li class="answer-mat-chi" @click="toggle2()">2 浏览菜单点餐</li>
        <li class="answer-mat-chi" @click="toggle3()">3 确认订单及送餐信息</li>
        <li class="answer-mat-chi" @click="toggle4()">4 选择支付方式后提交</li>
      </ul>
    </div>
    <div class="message">
      <div class="message-left">
        <img class="left-img" src="http://www.4008823823.com.cn/kfcios/jsp/help/images/help01.png">
      </div>
      <div class="message-right" v-if="isShow1">
        <div class="right-test">
          1请填写常用的电子邮箱或手机登录，阅读并同意
          <a href="#" class="red">《用户协议》</a>后，填写送餐信息
          （包括顾客姓名、送餐联系电话、送餐地址等）并选择送餐时间后进入菜单点餐。
        </div>
      </div>
      <div class="message-right" v-if="isShow2">
        <div class="right-test">
          从左侧菜单点击类别（如主食，冷饮等），然后选择您喜爱的餐点，输入份数，点击"订购"，该餐点就被加入右侧的"我的订单"。
          "我的订单"中将罗列您的点餐内容和金额，可点击取消或增减某项餐点，也可点击进入"下一步"。
        </div>
      </div>
      <div class="message-right" v-if="isShow3">
        <div class="right-test">
          请再次检查您的订单，如订餐内容和金额符合优惠项目的享用条件，您可在自动列出的优惠项目中直接点选，未
          选视为自动放弃。然后再检查送餐信息是否有误，或添加其他送餐要求，如增加一个临时的送餐联系人和电话等。
        </div>
      </div>
      <div class="message-right" v-if="isShow4">
        <div class="right-test">
          我们提供了货到现金付款，网上支付（包括网上银行和支付宝即时到账交易）两种支付结算，
          请任选其一，然后提交您的订单。如果您在订餐或网上支付过程中花费时间较长，可能导致您的送餐/外带时间顺延。
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'HelpNew1',
  data () {
    return {
      isShow1: true,
      isShow2: false,
      isShow3: false,
      isShow4: false
    }
  },
  methods: {
    toggle1: function () {
      this.isShow1 = !this.isShow1
      this.isShow2 = false
      this.isShow3 = false
      this.isShow4 = false
    },
    toggle2: function () {
      this.isShow2 = !this.isShow2
      this.isShow1 = false
      this.isShow3 = false
      this.isShow4 = false
    },
    toggle3: function () {
      this.isShow3 = !this.isShow3
      this.isShow2 = false
      this.isShow1 = false
      this.isShow4 = false
    },
    toggle4: function () {
      this.isShow4 = !this.isShow4
      this.isShow2 = false
      this.isShow3 = false
      this.isShow1 = false
    }
  }
}
</script>
<style lang="stylus" scoped>
.answer {
    display: flex;
    width: 15rem;
    height: 0.6rem;

    .answer-mat {
      display: flex;
      font-size: 16px;
      margin-top: 0.15rem;
      width: 100%;
      color: #b7b7b7;
      justify-content: space-around;
      cursor: pointer;
    }
  }

  .message {
    width: 14.2rem;
    height: 5.6rem;
    border: 3px solid #e8e8e8;
    margin-top: 0.3rem;
    margin-left: 0.3rem;
    display: flex;
    flex-wrap: wrap;

    .message-left {
      width: 2.7rem;
      height: 5.6rem;
      border: 1px solid #ccc

      .left-img {
        margin-top: .4rem
        width: 100%;
        height: 80%;
      }
    }

    .message-right {
      width: 11.4rem;
      height: 5rem;

      .right-test {
        width: 10.2rem;
        height: 0.7rem;
        margin: auto;
        margin-top: 2rem;

        .red {
          color: #c6000a;
        }
      }
    }
  }
</style>
